<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!doctype html>
<html>
<head>
    <title>礼途租车</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE8" />
    <meta name="apple-itunes-app" content="app-id=427555239"/>
   	<!-- <link rel="stylesheet" type="text/css" href="../../css/qiye/common.css" />  
    <link rel="stylesheet" type="text/css" href="../../css/qiye/style.css" />
    
    <link rel="stylesheet" type="text/css" href="../../css/qiye/mem.css"> -->
    <style type="text/css">
        .header_menu_drop{ display: none;}
        .header_menu_drop a:hover{ background: #c51e24; color: #FFF;}
        .down .header_menu_drop{ display: block;}
        .header .nav .xl li._menu_drop{ width: 108px; padding: 0px; text-align: center;}
        
        
        /* .max-banenr{background: #fff url('http://i3.yongche.name/u/images/201502/69781260.png?1423553880') repeat-x left bottom}*/
		.max-banenr .dian{right: 10px;}
		.max-banenr .c_banner{width: 100%;position: relative;margin: 0px auto; background: #eee;}
		#marquee{height: 32px;overflow: hidden;}
		.footer{margin-top: 20px;}
		.home_form{left: 25px;}
		.top_banner{width: 100%;min-width:980px;height:421px;overflow: hidden;}
		.max-banenr-list{/*width: 9999999px;*/width:100%;margin:0;padding:0;}
		.max-banenr-list li{height: 421px;display: inline-block;width:100%; text-align: center;}
		.max-banenr-list img{width:auto;height: 421px;}
		.gray-link:hover{text-decoration: none;}
		/*企业租车改版css@20140514*/
		/* .header .top,.header_menu_drop{background: #00aced;} */
		a:hover,.header .nav .xl li a.on,.header .nav .xl li a:hover,.tab_city li a.on{color:#00aced}
		.c_red2, .red{color: #00aced!important;}
		.header .logo a{background:url(http://i1.yongche.name/u/images/201405/2564163338.png?1423553880) no-repeat left top;}
		.header .nav .xl li .header_menu_drop a:hover,.header .nav .xl li.down .on2{background:#0295cd;}
		.max-banenr .dian a{background: #fff;border-radius:50%}
		.max-banenr .dian .on, .max-banenr .dian a:hover{background:#00aced;}
		.conference_t1{text-align: center;color: #00aced;font-size: 18px;height: 30px;line-height: 30px;margin: -15px auto 0;width: 90px;background: #fff}
		.conference_t2{text-align: center;font-size: 16px;margin-top: 50px}
		i.mail,.conference_icn{background: url(http://i1.yongche.name/u/images/201405/4199065518.png?1423553880) no-repeat -9999em -9999em;display: inline-block;overflow: hidden;width: 50px;height: 50px}
		i.mail{width:18px ;height:13px ;background-position: 0 -382px}
		.conference_icn1{background-position: 0 0}
		.conference_icn2{background-position: right 0}
		.conference_icn3{background-position: 0 -61px}
		.conference_icn4{background-position: right -61px}
		.conference_icn5{background-position: 0 -125px}
		.conference_icn6{background-position: right -125px}
		.conference_icn7{background-position: 0 -190px}
		.conference_icn8{background-position: right -190px}
		.conference_icn9{background-position: 0 -257px}
		.conference_icn10{background-position: right -257px}
		.conference_icn11{background-position: 0 -315px}
		.conference_icn12{background-position: right -315px}
		.conference_list{margin-top: 30px;font-size: 14px}
		.conference_list li{float: left;width: 420px;padding:20px 0px 20px 70px;line-height: 25px;}
		.conference_list li i{float: left;margin-left: -70px;}
		.header .menu .btn_register, .header .menu .btn-details.bg_red{background-position: 0 0}
		/* 新的 css*//*--------------------------------------------------------------------- *--------------------------------------------------------------------- * Gerneral Classes *--------------------------------------------------------------------- *----------------------------------------------------------------------*/
		body , html{height: 100%;padding: 0;margin: 0 auto;font-family: "Hiragino Sans GB", "Microsoft YaHei", "WenQuanYi Micro Hei", sans-serif;}
		ul, li{list-style: none;}
		h2, h3{margin: 0;}
		a{text-decoration: none;}
		img{vertical-align: middle;}
		/*--------------------------------------------------------------------- *--------------------------------------------------------------------- * Help Classes *--------------------------------------------------------------------- *----------------------------------------------------------------------*/
		.mr65{margin-right: 65px;}
		.mr87{margin-right: 87px;}
		.blue-bg{color: #fff;background-color: #c4ceda;}
		.gray-bg{background-color: #e0e0e0;}
		.brown-bg{background-color: #ebeadb;}
		.pink-bg{color: #fff;background-color: #e6d4d4;}
		.root{position: relative;}
		.pull-left{float: left;}
		.pull-right{float: right;}
		.w130{width: 130px;}
		.pb55{padding-bottom: 55px;}
		/*--------------------------------------------------------------------- *--------------------------------------------------------------------- * Module Classes *--------------------------------------------------------------------- *----------------------------------------------------------------------*//*using cars in Internet era*/
		.yongche-internet{width: 100%;background:#fefefe url('http://i3.yongche.name/u/images/201502/3568922315.png?1423553880') center;}
		.icon-container{display: inline-block;position: relative;right: 9px;height: 78px;}
		.title-part{margin-top: 20px;margin-bottom: 30px;font-size: 30px;font-weight: bold;letter-spacing: 20px;}
		.internet-feature-list{height: 231px;width: 980px;padding-bottom: 86px;padding-left: 0;margin: 0 auto;}
		.internet-feature-list li{float: left;}
		.internet-feature-list p{font-size: 18px;margin-top: 0;margin-bottom: 10px;}
		/*why choose yidao*/
		.why-list tr td >div{position: relative;width: 330px;height: 116px;padding-top: 48px;text-align: left;}
		.why-list tr td .blue-font{width: 270px;padding-right: 45px;text-align: right;color: #00abf0;}
		.why-list tr:first-child td:last-child >div{height: 326px;padding: 0;}
		.why-list tr td .img-container{height: 326px;padding: 0;}
		.why-list tr td .pink-bg{width: 130px;}
		.why-list tr td .pink-message{width: 185px;}
		.why-list h3{margin-top: 16px;text-align: center;font-size: 25px;font-weight: normal;}
		.why-list p{margin-top: 0;margin-bottom: 5px;margin-left: 15px;}
		.why-list small{position: absolute;bottom: 15px;left: 15px;}
		.why-list .blue-font small{position: absolute;bottom: 15px;right: 45px;}
		/*our character*/
		.character{height: 458px;padding-bottom: 64px;background-color: #ccc;/*border-bottom: 27px solid #000;*/}
		.character-list{width: 980px;padding-left: 0;color: #fff;}
		.character-list li{float: left;width: 300px;height: 263px;padding-top: 50px;padding-right: 12px;padding-left: 13px;margin-left: 1px;text-align: left;background-color: #878787;/*border-bottom: 10px solid #fff;*/}
		.character-list li:first-child{background-color: #a1a1a1;}
		.character-list li:last-child{background-color: #666;}
		.character-list li.dark-gray-bg{background-color: #666;}
		.character-list li h3{margin-top: 20px;font-size: 25px;font-weight: normal;}
		.character-list tr td{vertical-align: top;}
		.character-list tr td h3, .character-list tr td p{margin-left: 20px;}
		.placeholder-border{height: 18px;width: 5px;margin-bottom: 20px;margin-left: 20px;background-color: #fff;}
		/*--------------------------------------------------------------------- *--------------------------------------------------------------------- * Components Classes *--------------------------------------------------------------------- *----------------------------------------------------------------------*/
		.center-container{width: 980px;padding-top: 50px;margin: 0 auto;text-align: center;font-size: 16px;}
		.title-module{width: 320px;margin: 0 auto;margin-bottom: 65px;font-size: 35px;font-weight: normal;border-left: 1px solid #000;border-right: 1px solid #000;}
		.arrow{display: inline-block;height: 0;}
		i.arrow-right{border: 4px solid transparent;border-left: 6px solid #000;}
		i.arrow-left{border: 4px solid transparent;border-right: 6px solid #00abf0;}
		i.arrow-down{position: absolute;left: 0;right: 0;bottom: -23px;width: 0;margin: 0 auto;border: 14px solid transparent;border-top: 9px solid #000;}
		.border-gradient-pink{position: absolute;bottom: 0;left: 130px;height: 1px;width: 333px;background: -o-linear-gradient(left,#e6d4d4,#fff);background: -moz-linear-gradient(left,#e6d4d4,#fff);background: -webkit-gradient(linear, 0% 0, 100% 0, from(#e6d4d4), to(#fff));filter: progid:DXImageTransform.Microsoft.gradient(GradientType=1, startColorstr=#fff, endColorstr=#e6d4d4);/*IE<9>*/-ms-filter: "progid:DXImageTransform.Microsoft.gradient (GradientType=1, startColorstr=#fff, endColorstr=#e6d4d4)";/*IE8+*/}
		.border-gradient-gray{position: absolute;top: 0;left: -140px;height: 1px;width: 140px;background: -o-linear-gradient(right,#e0e0e0,#fff);background: -moz-linear-gradient(right,#e0e0e0,#fff);background: -webkit-gradient(linear, 100% 0, 0% 0, from(#e0e0e0), to(#fff));filter: progid:DXImageTransform.Microsoft.gradient(GradientType=1, startColorstr=#fff, endColorstr=#e0e0e0);/*IE<9>*/-ms-filter: "progid:DXImageTransform.Microsoft.gradient (GradientType=1, startColorstr=#fff, endColorstr=#e0e0e0)";/*IE8+*/}
		.border-gradient-blue{position: absolute;top: -116px;left: 0;height: 116px;width: 1px;background: -o-linear-gradient(bottom,#c4ceda,#fff);background: -moz-linear-gradient(bottom,#c4ceda,#fff);background: -webkit-gradient(linear, 0 100%, 0 0, from(#c4ceda), to(#fff));filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr=#fff, endColorstr=#c4ceda);/*IE<9>*/-ms-filter: "progid:DXImageTransform.Microsoft.gradient (GradientType=0, startColorstr=#fff, endColorstr=#c4ceda)";/*IE8+*/}
		.border-gradient-img{position: absolute;top: 0;left: 0;height: 1px;width: 460px;background: -o-linear-gradient(left,#e5e5e5,#fff);background: -moz-linear-gradient(left,#e5e5e5,#fff);background: -webkit-gradient(linear, 0% 0, 100% 0, from(#e5e5e5), to(#fff));filter: progid:DXImageTransform.Microsoft.gradient(GradientType=1, startColorstr=#fff, endColorstr=#e5e5e5);/*IE<9>*/-ms-filter: "progid:DXImageTransform.Microsoft.gradient (GradientType=1, startColorstr=#fff, endColorstr=#e5e5e5)";/*IE8+*/}
    </style>
    <script type="text/javascript">var Do=function(){Do.actions.push([].slice.call(arguments));};Do.ready=function(){Do.actions.push([].slice.call(arguments));};Do.add=Do.define=function(name,opts){Do.mods[name]=opts;};Do.global=function(){Do.global.mods=Array.prototype.concat(Do.global.mods,[].slice.call(arguments));};Do.global.mods=[];Do.mods={};Do.actions=[];</script>
    <script type="text/javascript">
        Do( function(){
            $( "._menu_drop").hover( function(){
                var _self = $( this);

                _self.addClass( "down");
                _self.children('a').addClass( "opacity5");
            }, function(){
                var _self = $( this);

                _self.removeClass( "down");
                _self.children('a').removeClass( "opacity5");
            });
        });
    </script>
    <link rel="stylesheet" type="text/css" href="${basePath }/css/style.css" /> 
<link rel="stylesheet" type="text/css" href="http://i3.yongche.name/css/app/??common/reset.css,common/common.css,cms/cms.css?1435692720" />
    
</head>
<body>
<jsp:include page="/header.jsp"/>

<!-- banner -->
<div class="max-banenr">
    <div class="_banner c_banner">
        <div class="top_banner">
            <ul class="max-banenr-list">
                <li><img src1="http://i3.yongche.name/u/images/201403/2654154611.jpeg?1423553880" src="http://i2.yongche.name/u/images/201502/2355872447.png?1423553880" /></li>
                <li><img src1="http://i3.yongche.name/u/images/201401/266079866.jpeg?1423553880" src="http://i3.yongche.name/u/images/201502/3199273940.png?1423553880" /></li>
                <li><img src1="http://i3.yongche.name/u/images/201403/2654154611.jpeg}>" src="http://i2.yongche.name/u/images/201502/3327400894.png?1423553880" /></li>
                <li><img src1="http://i3.yongche.name/u/images/201401/1027805950.jpeg?1423553880"  src="http://i3.yongche.name/u/images/201502/490779145.png?1423553880"/></li>
            </ul>
        </div>

        <div class="dian">
            <a class="icons on" href="javascript:;"></a>
            <a class="icons" href="javascript:;"></a>
            <a class="icons" href="javascript:;"></a>
            <a class="icons" href="javascript:;"></a>
        </div>

    </div>
</div>
<!-- banner -->

<!-- 新的内容 -->
<!--互联网时代的用车-->
<div class="yongche-internet root">
    <div class="center-container">
        <h2 class="title-module">互联网时代的用车</h2>
        <ul class="internet-feature-list">
            <li class="mr87">
                <i class="icon-container">
                    <img src="http://i3.yongche.name/u/images/201502/1530198640.png?1423553880" alt="创新"/>
                </i>
                <h3 class="title-part">创新</h3>
                <p>不买车、不养车，享受专车服务</p>
                <p>无司机、无管理，享受专业品质</p>
            </li>
            <li class="mr65">
                <i class="icon-container">
                    <img src="http://i3.yongche.name/u/images/201502/945955930.png?1423553880" alt="节约"/>
                </i>
                <h3 class="title-part">节约</h3>
                <p>按需用车，分享服务，解放闲置运力</p>
                <p>随时预定，快速响应，拒绝漫长等待</p>
            </li>
            <li>
                <i class="icon-container">
                    <img src="http://i1.yongche.name/u/images/201502/2292822266.png?1423553880" alt="可控"/>
                </i>
                <h3 class="title-part">可控</h3>
                <p>多记管理，灵活授权，简化报销流程</p>
                <p>清晰对账，自动记录，无需个人垫付</p>
            </li>
        </ul>
    </div>
    <i class="arrow arrow-down"></i>
</div>



<!--为什么使用礼途-->
<div class="pb55 root">
    <div class="center-container">
        <h2 class="title-module">为什么使用礼途</h2>
        <table class="why-list" border="0" cellpadding="0" cellspacing="0">
            <tbody>
            <tr>
                <td>
                    <div class="blue-bg root">
                        <h3>企业内部员工用车</h3>
                        <!-- <small>question</small> -->
                        <div class="border-gradient-blue"></div>
                    </div>
                </td>
                <td>
                    <div>
                        <p>为员工因公外出</p>
                        <p>加班等提供必要的用车服务</p>
                        <!-- <small><i class="arrow arrow-right"></i>Answer</small> -->
                    </div>
                </td>
                <td rowspan="2">
                    <div class="root img-container">
                        <img src="http://i2.yongche.name/u/images/201502/3607724629.png?1423553880" alt=""/>
                        <div class="border-gradient-img"></div>
                    </div>
                </td>
            </tr>
            <tr>
                <td>
                    <div class="blue-font ">
                        <p>为公司新老客户</p>
                        <p>提供优质的用车服务</p>
                        <!-- <small>Answer<i class="arrow arrow-left"></i></small> -->
                    </div>
                </td>
                <td>
                    <div class="brown-bg">
                        <h3>为客户提供用车</h3>
                       <!--  <small>question</small> -->
                    </div>
                </td>

            </tr>
            <tr>
                <td>
                    <div class="gray-bg root">
                        <h3>会议用车</h3>
                        <!-- <small>question</small> -->
                        <div class="border-gradient-gray"></div>
                    </div>
                </td>
                <td>
                    <div>
                        <p>根据会议行程单提供接送机</p>
                        <p>时租等专业的用车服务</p>
                        <!-- <small><i class="arrow arrow-right"></i>Answer</small> -->
                    </div>
                </td>
                <td>
                    <div class="pink-bg w130 pull-left root">
                        <h3>礼品招待</h3>
                        <!-- <small>question</small> -->
                        <div class="border-gradient-pink"></div>
                    </div>
                    <div class="pink-message pull-right ">
                        <p>为公司客户</p>
                        <p>企业会员提供最实用的</p>
                        <p>出行礼品</p>
                        <!-- <small><i class="arrow arrow-right"></i>Answer</small> -->
                    </div>

                </td>
            </tr>

            </tbody>
        </table>

    </div>
    <i class="arrow arrow-down"></i>
</div>


<!--我们的特色-->
<div class="character">
    <div class="center-container">
        <h2 class="title-module">我们的特色</h2>
        <ul class="character-list">
            <li>
                <table>
                    <tbody>
                    <tr>
                        <td rowspan="3">
                            <i>
                                <img src="http://i3.yongche.name/u/images/201502/1665132938.png?1423553880" alt=""/>
                            </i>
                        </td>
                        <td>
                            <h3>专属客服</h3>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <div class="placeholder-border"></div>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <p>
                                企业用车人无需等待，直通企业客服专席，提供全流程服务
                            </p>
                        </td>
                    </tr>
                    </tbody>
                </table>
            </li>
            <li>
                <table>
                    <tbody>
                    <tr>
                        <td rowspan="3">
                            <i>
                                <img src="http://i2.yongche.name/u/images/201502/4252195938.png?1423553880" alt=""/>
                            </i>
                        </td>
                        <td>
                            <h3>专业司机</h3>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <div class="placeholder-border"></div>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <p>
                                驾龄超过5年的专业司机提供服务，经过培训的统一话术，文明用语
                            </p>
                        </td>
                    </tr>
                    </tbody>
                </table>
            </li>
            <li class="dark-gray-bg">
                <table>
                    <tbody>
                    <tr>
                        <td rowspan="3">
                            <i>
                                <img src="http://i1.yongche.name/u/images/201502/1476610828.png?1423553880" alt=""/>
                            </i>
                        </td>
                        <td>
                            <h3>高端车型</h3>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <div class="placeholder-border"></div>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <p>
                                根据您的需求匹配相对应的车辆，礼途拥有专业别克GL8、奥迪A6L车队
                            </p>
                        </td>
                    </tr>
                    </tbody>
                </table>
            </li>
        </ul>

    </div>
</div>






<script type="text/javascript">

    Do( function(){
        var bannerIndex = 0,
                $banner = $('div.top_banner'),
                $imgs = $banner.find('li'),
                $slide = $('div.dian a'),
                stopAnim = false;

        //位置
        var boxW=$banner.outerWidth();
        var dianR=boxW>980?(boxW-980)/2+10:10
        $('.max-banenr .dian').css('right',dianR+'px');

        if(boxW<1920){
            $imgs.css('margin-left',-(1920-boxW)/2+'px');
        }


        function timeoutRound(){
            if( !stopAnim){
                bannerShow();
            }
            window.setTimeout( timeoutRound, 4000);
        }
        function bannerShow(){

            $imgs.hide();
            $imgs.eq( bannerIndex).show();
            $slide.removeClass('on');
            $slide.eq( bannerIndex).addClass('on');

            bannerIndex = bannerIndex >= $imgs.length - 1 ? 0 : bannerIndex + 1;
        }

        window.setTimeout( timeoutRound, 2000);

        $slide.hover( function( index){

            stopAnim = true;
            bannerIndex = $( this).index();
            bannerShow();
        }, function(){
            stopAnim = false;
        });





    });

    var _mvq = _mvq || [];
    _mvq.push(['$setAccount', 'm-21468-0']);
    _mvq.push(['$logConversion']);
    (function() {
        var mvl = document.createElement('script');
        mvl.type = 'text/javascript'; mvl.async = true;
        mvl.src = ('https:' == document.location.protocol ? 'https://static-ssl.mediav.com/mvl.js' : 'http://static.mediav.com/mvl.js');
        var s = document.getElementsByTagName('script')[0];
        s.parentNode.insertBefore(mvl, s);
    })();
</script>

<!-- render: data/page/bd/conference.html at 2015-02-10 17:35:36 by 845 -->    

<div class="clear mt80"></div>
<!-- 选着企业账户 -->
<div id="popdiv_white_l" class="popdiv_white" style="width:400px; display:none; "> 
    <div class="white-t-r"><div class="white-t-l"></div></div>
    <div class="bg_white popdiv_white_main"> 
        <div class="popdiv_title ac c_blue3" >请选择企业账户</div>
            </div>
    <div class="white-b-r"><div class="white-b-l"></div></div>
</div>
<!-- 选择企业账户 -->

<!-- 提示信息 -->
<div class="popdiv_white xs2" id="id_ycutils_alert_pop" style="display: none; top: 107px; left: 424.5px;">
    <div class="white-t-r"><div class="white-t-l"></div></div>
    <div class="bg_white popdiv_white_main">
        <a class="popdiv_close icons icons-close-light _close" title="关闭" href="javascript:;"></a>
        <div class="popdiv_title">提示</div>
        <div class="pt20 pb20 _content" id="id_msg_content"><span class="ico_f mar-r"></span></div>
        <div class="ac">
            <a href="javascript:;" class="btn-blue-left ac _close _confirm">
                <span class="btn-red-right"><span class="btn-blue-center w110">确定</span></span>
            </a>
        </div>
    </div>
    <div class="white-b-r"><div class="white-b-l"></div></div>
</div>
<!-- 提示信息 -->
    <br>
    <div style="color:#5e5e5e;" class="ta-c new-footer">
        <p class="line">&nbsp;</p> 
        <p style="font-size:14px;line-height:24px;">© 2014 北京东方车云信息技术有限公司 YongChe.com 京ICP证110470号 京ICP备11005954号</p>
        <p style="font-size:24px;" class="f24 gap-hr-m">Simple Life&nbsp;&nbsp;&nbsp;&nbsp;Easy Go </p>
        <!-- <p>
            <a class="safe" target="_blank" href1="http://tns-sswhois.cnnic.cn/validatecode/validate.jsp?queryValue=%u8BF7%u8F93%u5165%u60A8%u60F3%u8981%u67E5%u8BE2%u7684%u4FE1%u606F&amp;queryType=domainName&amp;service=%2Fqueryserver&amp;inputfield=queryValue" href="https://ss.knet.cn/verifyseal.dll?sn=2011033100100007667&ct=df&a=1&pa=532171"></a>
            <a class="allow bdr-dark" target="_blank" href="http://www.miitbeian.gov.cn"></a>
        </p><br /> -->
    </div>
</div>
<script type="text/javascript" src="http://i2.yongche.name/js/do/do.all.js?1424632080"></script>
<script type="text/javascript">
    Do('c.header');
</script>
</body>
</html>
    